{% extends 'TopxiaWebBundle::bootstrap-modal-layout.html.twig' %}

{% set modal_class = 'modal-lg' %}

{% block title %}上传文件{% endblock %}
  
{% block body %}
<style>
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #fff;
  padding: 5px 10px;
  color: #333;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #e6e6e6;
  border-color: #adadad;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
}

.balloon-uploader {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.balloon-uploader-heading {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  display: none;
}

.balloon-uploader-footer {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}

.balloon-filelist {
  width: 100%;
}

.balloon-filelist-heading {
  padding: 8px 10px;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.balloon-uploader-body {
  position: relative;
  
}

.balloon-filelist .file-name,
.balloon-filelist .file-size,
.balloon-filelist .file-status,
.balloon-filelist .file-manage {
  position: relative;
  z-index: 1;
}

.balloon-filelist .file-name {
  display: inline-block;
  width: 40%;
}

.balloon-filelist .file-size {
  display: inline-block;
  width: 20%;
}

.balloon-filelist .file-status {
  display: inline-block;
  width: 18%;
}
.balloon-filelist .file-manage {
  display: inline-block;
  width: 20%;
  z-index: 9999;
  position: absolute;
}


.balloon-filelist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 200px;
  max-height: 300px;
  overflow-y: scroll;
}

.balloon-filelist ul li {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
}

.balloon-dnd {
  visibility: hidden;
}

.balloon-uploader-none .balloon-uploader-footer,
.balloon-uploader-none .balloon-uploader-body {
  visibility: hidden;
}

.balloon-uploader-none .balloon-dnd {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.balloon-nofile {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 200px;
  text-align: center;
  color: #999;
}

.balloon-uploader .file-pick-btn {
  display: inline-block;
}

.balloon-uploader .pause-btn{
  display: inline-block;
  margin-top: -25px;
}

.balloon-uploader .start-upload-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #5bc0de;
  padding: 5px 10px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #46b8da;
  overflow: hidden;
}

.balloon-uploader .start-upload-btn:hover {
  background: #31b0d5;
  border-color: #269abc;
}

.balloon-filelist .file-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: -40px;
  bottom: 0;
}

.balloon-filelist .file-progress-bar {
  background: rgb(219,242,215);
  background: rgba(59, 181, 33, 0.18);
  float: left;
  height: 100%;
}

</style>

  {% include 'TopxiaWebBundle:CloudFile:video-quality-switcher.html.twig' %}
  <div class="balloon-uploader" id="batch-uploader"
    data-init-url="{{ path('uploader_init', {token:token}) }}"
    data-finish-url="{{ path('uploader_finished', {token:token}) }}"
    data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
    data-accept="{{ uploader_accept(targetType)|json_encode }}"
    data-process="{{ uploader_process(targetType) }}"
  >
    <div class="balloon-uploader-heading">上传文件</div>
    <div class="balloon-uploader-body">
      <div class="balloon-nofile">请将文件拖到这里，或点击添加文件按钮</div>
      <div class="balloon-filelist">
        <div class="balloon-filelist-heading">
          <div class="file-name">文件名</div>
          <div class="file-size">大小</div>
          <div class="file-status">状态</div>
        </div>
        <ul>
        </ul>
      </div>
    </div>
    <div class="balloon-uploader-footer">
      <div class="file-pick-btn"><i class="glyphicon glyphicon-plus"></i> 添加文件</div>
      <div class="start-upload-btn"><i class="glyphicon glyphicon-upload"></i> 开始上传</div>
    </div>
  </div>

  {% if setting('storage.upload_mode', 'local') == 'cloud'  %}
    <div class="alert alert-info">
      <ul>
        <li>资料库支持多种文件格式上传分享下载，单个文件大小上限<strong>2GB</strong>。</li>
        <li>视频将上传到<strong>云视频服务器</strong>，并转换为云视频为创建ES视频课时备用，如需修改云视频转码类型，请先设置转码类型后再进行上传视频。转换过程需要等待，转换过程中视频将无法播放。</li>
        <li>支持<strong>断点续传</strong>（仅支持HTML5浏览器）。</li>
      </ul>
    </div>
  {% else %}
    <div class="alert alert-info">
      <ul>
        <li>支持<strong>mp4, mp3</strong>格式的文件上传，且文件大小不能超过<strong>2.0GB</strong>。<br>MP4文件的视频编码格式，请使用AVC(H264)编码，否则浏览器无法播放。</li>
        <li>视频将上传到<strong>网站服务器</strong>，如需使用云视频,点击<a href="http://open.edusoho.com/show/cloud/video" target="_blank">这里</a>了解详情。</li>
      </ul>
    </div>
  {% endif %}

<script>app.load('uploader/batch-upload-modal')</script>
{% endblock %}
{% block footer %}
    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
{% endblock %}

